<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script type="text/javascript" th:src="@{/static/jquery-2.1.4.js}"></script>
	<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
	<script type="text/javascript" th:src="@{/static/mylayer.js}"></script>
</head>
<body>
<!--表格上侧是搜索框-->
<form class="layui-form">
	请假类型:
	<div class="layui-inline">
		<input type="text" name="type" value="" class="layui-input" lay-affix="clear">
	</div>
	<div class="layui-inline">
		<button class="layui-btn" lay-submit lay-filter="submitSearch">搜索</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
</form>

<!--要渲染的table表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--右侧单元格工具条-->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">通过</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">不通过</a>
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="content">详情</a>
</script>

<!--表格上侧工具条：添加、批量删除-->


<script type="text/html" id="imageTemplet">
	<img src="/pic/{{d.image}}"/>
</script>

<script type="text/html" id="roleTemplet">
	{{#     if(d.role == 1) {             }}
	<span class="layui-badge layui-bg-orange">超级管理员</span>
	{{#     } else if(d.role == 2) {     }}
	<span class="layui-badge layui-bg-green">普通管理员</span>
	{{#     }                            }}
</script>

<script type="text/html" id="statusTemplet">
	{{#     if(d.status == 1) {             }}
	待审核
	{{#     } else if(d.status == 2) {     }}
	通过
	{{#     } else if(d.status == 3) {     }}
	没通过
	{{#     }                            }}
</script>

<script>
	layui.use(['table','form', 'laydate', 'upload'], function(){
		var table = layui.table;
		var form = layui.form;
		var laydate = layui.laydate;
		var upload = layui.upload;
		//查找所有的博客分类


		//https://layui.dev/2.7/static/json/table/blog.json?page=1&limit=10
		// http://localhost:8080/blog/list?page=1&limit=10&name=zhangsan&email=shsdh
		table.render({
			elem: '#test'
			,toolbar: '#toolbarDemo'
			,url:'/leave/list'
			,cols: [
				[
					{type:'checkbox', fixed: 'left'}
					,{field:'id', title: 'ID', width:80,sort: true, fixed: 'left'}
					,{field:'type', title: '请假类型'}
					,{field:'leaveCount', title: '请假天数',width:100}
					,{field:'content', title: '请假理由',escape: false}
					,{field:'employeeName', title: '请假人',width:100}
					,{field:'status', title: '状态', templet: '#statusTemplet'}
					,{field:'image', title: '封面', templet: '#imageTemplet'}
					,{fixed: 'right', title:'操作',minWidth:175, toolbar: '#barDemo'}
				]
			]
			,page: true
			,id: 'tableId'
		});

		// 搜索提交
		form.on('submit(submitSearch)', function(data){
			var field = data.field; // 获得表单字段
			// 执行搜索重载
			table.reload('tableId', {
				page: {
					curr: 1 // 重新从第 1 页开始
				},
				where: field // 搜索的字段
				// http://localhost:8080/blog?method=selectByPage&page=1&limit=10&name=zhangsan&credit=12
			});

			return false; // 阻止默认 form 跳转
		});

		// 工具栏事件
		table.on('toolbar(test)', function(obj){
			var id = obj.config.id;
			var checkStatus = table.checkStatus(id);
			var othis = lay(this);
			switch(obj.event){


				case 'LAYTABLE_TIPS':
					layer.alert('Table for layui-v'+ layui.v);
					break;
			};
		});

		//触发单元格工具事件
		table.on('tool(test)', function(obj){ // 双击 toolDouble
			var data = obj.data;
			//console.log(obj)
			if(obj.event === 'del'){
				layer.confirm('确认不通过该请假申请吗', function(index){
					//发送ajax请求
					$.post(
							'/leave/nopass', //后台地址
							{'id': data.id},    //传递数据
							function (result) { //回调函数
								//{}  [{},{}]
								//{code: 0, msg: '删除成功', data: null, ok: true}
								console.log(result);
								if (result.code == 0) {
									mylayer.okMsg(result.msg);
									//刷新表格，查询最新的数据
									table.reload('tableId');
								} else {
									mylayer.errorMsg(result.msg);
								}
							},
							'json'              //服务器返回数据是json格式
					);

				});
			} else if(obj.event === 'content'){
				layer.open({
					title: '请假理由',
					type: 1,
					area: ['90%', '90%'],
					content: data.content
				});
			}else if(obj.event=='edit'){
				layer.confirm('确认要通过该请假申请吗', function(index){
					//发送ajax请求
					$.post(
							'/leave/pass', //后台地址
							{'id': data.id},    //传递数据
							function (result) { //回调函数
								//{}  [{},{}]
								//{code: 0, msg: '删除成功', data: null, ok: true}
								console.log(result);
								if (result.code == 0) {
									mylayer.okMsg(result.msg);
									//刷新表格，查询最新的数据
									table.reload('tableId');
								} else {
									mylayer.errorMsg(result.msg);
								}
							},
							'json'              //服务器返回数据是json格式
					);

				});
			}
		});
	});
</script>

</body>
</html>